<template>
  <div id="passenger-detail" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item ms-1">
          <router-link to="/h5/customers">客户</router-link>
        </li>
        <li class="breadcrumb-item">
          <router-link to="/h5/passengers">员工</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
          <template v-if="id === 0"> 增加 </template>
          <template v-else> 修改 </template>
        </li>
        <span class="ms-auto me-1" @click.stop="back()">返回</span>
      </ol>
    </nav>

    <div class="card-body px-0">
      <ul class="nav nav-tabs nav-bordered mb-3" id="myTab" role="tablist">
        <li class="nav-item">
          <a
            class="nav-link active"
            id="basic-tab"
            data-bs-toggle="tab"
            href="#basicTab"
            role="tab"
            >基础信息</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="id-tab"
            data-bs-toggle="tab"
            href="#idTab"
            role="tab"
            >证件信息</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="ffp-tab"
            data-bs-toggle="tab"
            href="#ffpTab"
            role="tab"
            >常旅客信息</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="ot-tab"
            data-bs-toggle="tab"
            href="#otTab"
            role="tab"
            >其它信息</a
          >
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="basicTab" role="tabpanel">
          <div class="card">
            <div class="card-body">
              <input type="hidden" v-model.number="id" />

              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 中文名 </label>
                <div class="col-8">
                  <input type="text" class="form-control" v-model="nameCn" />
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 英文名 </label>
                <div class="col-8">
                  <input type="text" class="form-control" v-model="nameEn" />
                  <small class="form-text text-muted"
                    >一般指护照上的英文名</small
                  >
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> first name </label>
                <div class="col-8">
                  <input type="text" class="form-control" v-model="firstName" />
                  <small class="form-text text-muted"
                    >一般指护照上的英文名中的名</small
                  >
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> last name </label>
                <div class="col-8">
                  <input type="text" class="form-control" v-model="lastName" />
                  <small class="form-text text-muted"
                    >一般指护照上的英文名中的姓</small
                  >
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 公司 </label>
                <div class="col-8">
                  <my-select-customer
                    :customerId.sync="customerId"
                    :minId="0"
                  ></my-select-customer>
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 部门 </label>
                <div class="col-8">
                  <select class="form-select" v-model.number="departmentId">
                    <option value="0">请选择部门</option>
                    <template v-for="info in departments">
                      <option :value="info.id">{{ info.name }}</option>
                    </template>
                  </select>
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 职位级别 </label>
                <div class="col-8">
                  <select class="form-select" v-model.number="positionId">
                    <option value="0">请选择部门</option>
                    <template v-for="info of positions">
                      <option :value="info.id">{{ info.name }}</option>
                    </template>
                  </select>
                </div>
              </div>

              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 性别 </label>
                <div class="col-8">
                  <select class="form-select" v-model.number="gender">
                    <option value="1">男</option>
                    <option value="2">女</option>
                  </select>
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 手机 </label>
                <div class="col-8">
                  <input type="text" class="form-control" v-model="mobile" />
                  <small class="form-text text-muted">手机号</small>
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 电话 </label>
                <div class="col-8">
                  <input type="text" class="form-control" v-model="phone" />
                  <small class="form-text text-muted">联系电话</small>
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 电子邮件 </label>
                <div class="col-8">
                  <input type="text" class="form-control" v-model="email" />
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 生日 </label>
                <div class="col-8">
                  <my-date-picker
                    id="birthday"
                    v-model="birthday"
                  ></my-date-picker>
                  <small class="form-text text-muted"
                    >格式：yyyy-MM-dd 示例：2017-12-01</small
                  >
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 国家/地区 </label>
                <div class="col-8">
                  <input
                    type="text"
                    class="form-control"
                    v-model="nationality"
                  />
                  <small class="form-text text-muted"></small>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="idTab" role="tabpanel">
          <div class="card">
            <div class="card-header py-0">
              <a
                href="javascript:void(0);"
                @click.stop="addIdInfo()"
                class="float-end"
                >增加证件</a
              >
            </div>
            <div class="card-body" v-for="(info, index) in idInfos">
              <div class="row mb-1">
                <a
                  href="javascript:void(0)"
                  @click.stop="deleteIdInfo(index)"
                  class="btn btn-sm btn-danger float-end"
                  >删除</a
                >
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 证件类型 </label>
                <div class="col-8">
                  <select
                    class="form-select input-group-addon"
                    v-model.number="info.idType"
                  >
                    <option
                      :value="idTypeInfo.idType"
                      v-for="idTypeInfo of idTypes"
                    >
                      {{ idTypeInfo.idName }}
                    </option>
                  </select>
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 证件号 </label>
                <div class="col-8">
                  <input type="text" class="form-control" v-model="info.idNo" />
                </div>
              </div>

              <div class="row mb-1" v-if="info.idType !== 1">
                <label class="control-label col-4 text-end">
                  签发国家/地区
                </label>
                <div class="col-8">
                  <input
                    type="text"
                    class="form-control"
                    v-model="info.idIssueNation"
                  />
                </div>
              </div>
              <div class="row mb-1" v-if="info.idType !== 1">
                <label class="control-label col-4 text-end"> 有效期 </label>
                <div class="col-8">
                  <my-date-picker
                    :id="`idValidDate` + index"
                    v-model="info.idValidDate"
                  ></my-date-picker>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="ffpTab" role="tabpanel">
          <div class="card">
            <div class="card-header">
              常旅客卡号信息
              <a
                href="javascript:void(0);"
                @click.stop="addFfpNo()"
                class="float-end"
                >增加卡号</a
              >
            </div>
            <div class="card-body" v-for="(info, index) in ffpNos">
              <div class="row mb-1">
                <a
                  href="javascript:void(0)"
                  @click.stop="deleteFfpNo(index)"
                  class="btn btn-sm btn-danger float-end"
                  >删除</a
                >
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 航司代码 </label>
                <div class="col-8">
                  <input
                    type="text"
                    class="form-control"
                    v-model="info.carrier"
                  />
                  <span>航空公司两字代码</span>
                </div>
              </div>
              <div class="row mb-1" v-if="info.idType !== 1">
                <label class="control-label col-4 text-end"> 卡号 </label>
                <div class="col-8">
                  <input
                    type="text"
                    class="form-control"
                    v-model="info.ffpNo"
                  />
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 卡类型 </label>
                <div class="col-8">
                  <select
                    class="form-select input-group-addon"
                    v-model.number="info.ffpType"
                  >
                    <option value="0">普通卡</option>
                    <option value="1">银卡</option>
                    <option value="2">金卡</option>
                    <option value="8">白金卡</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="otTab" role="tabpanel">
          <div class="card">
            <div class="card-body">
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> VIP级别 </label>
                <div class="col-8">
                  <select
                    class="form-select input-group-addon"
                    v-model.number="vipLevel"
                  >
                    <option value="0">无</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                  </select>
                  <span class="text-muted small"
                    >此VIP级别可以覆盖职位级别所对应的VIP级别</span
                  >
                </div>
              </div>

              <div class="row mb-1">
                <label class="control-label col-4 text-end">
                  常旅客卡号（弃用）
                </label>
                <div class="col-8">
                  <input type="text" class="form-control" v-model="ffpNo" />
                  <small class="form-text text-muted"
                    >航司代码+卡号，多个航司用逗号分隔</small
                  >
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end">
                  飞机等级（弃用）
                </label>
                <div class="col-8">
                  <input
                    type="text"
                    class="form-control"
                    v-model="flightLevel"
                  />
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end">
                  火车等级（弃用）
                </label>
                <div class="col-8">
                  <input
                    type="text"
                    class="form-control"
                    v-model="trainLevel"
                  />
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 喜好 </label>
                <div class="col-8">
                  <input type="text" class="form-control" v-model="hobby" />
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="row mb-1">
                <label class="control-label col-4 text-end"> 备注 </label>
                <div class="col-8">
                  <input type="text" class="form-control" v-model="remark" />
                  <small class="form-text text-muted"></small>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-footer text-center">
      <button
        type="button"
        class="btn btn-primary btn-lg ms-5"
        v-on:click="savePsg()"
      >
        保存
      </button>
      <button type="button" class="btn btn-seondary btn-sm">取消</button>
    </div>
  </div>
</template>

<script>
import { searchPassengerById, createPsg, deletePsgById } from "@/api/user.js";
import {
  searchDepartmentsByCustomerId,
  searchCustomerPositions,
  searchCustomers,
} from "@/api/customer.js";

import $ from "jquery";
import MyPagination from "@/components/my-pagination.vue";
import MyDatePicker from "@/components/my-datepicker.vue";
import MySelectCustomer from "@/components/my-select2-customer.vue";

export default {
  components: {
    MyPagination,
    MyDatePicker,
    MySelectCustomer,
  },
  data() {
    return {
      id: 0,
      customerId: 0,
      departmentId: 0,
      positionId: 0,
      nameCn: "",
      nameEn: "",
      firstName: "",
      lastName: "",
      mobile: "",
      phone: "",
      email: "",
      birthday: "",
      idNo: "",
      passportNo: "",
      passportExpiry: null,
      nationality: "",
      gender: -1,
      flightLevel: "",
      trainLevel: "",
      hobby: "",
      ffpNo: "",
      remark: "",
      vipLevel: 0,

      idInfos: [],
      ffpNos: [],

      dataList: [],
      customers: [],
      departments: [],
      positions: [],

      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 20,
        pageTotal: 0,
      },
      searchName: "",

      psgInfo: null,
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isDataAdmin;
    },
    idTypes() {
      return this.$store.state.idTypes;
    },
  },
  watch: {
    customerId: function (newVal, oldVal) {
      if (oldVal !== this.customerId && parseInt(newVal) !== parseInt(oldVal)) {
        console.log(
          "customerId: oldVal=" +
            oldVal +
            ", newVal=" +
            newVal +
            ", " +
            this.customerId +
            ", " +
            typeof this.customerId
        );
        console.log(
          "customerId: oldVal=" + typeof oldVal + ", newVal=" + typeof newVal
        );
        this.searchDepartmentsByCustomerId();
        this.searchPositionsByCustomerId();
      }
    },
  },
  mounted: function () {
    this.resetPsg();

    // console.log(this.$route)
    this.id = parseInt(this.$route.params.id);
    // console.log(this.id)
    if (isNaN(this.id)) {
      this.id = parseInt(this.$route.query.id);
      if (isNaN(this.id)) {
        this.id = 0;
      }
    }
    if (this.id > 0) {
      this.search();
    }
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    search: function () {
      searchPassengerById(this.id, (v) => {
        this.psgInfo = v;
        this.editPsg();
      });
    },
    addIdInfo: function () {
      this.idInfos.push({
        id: 0,
        idType: 1,
        idNo: "",
        idIssueNation: "",
        idValidDate: "",
      });
    },
    deleteIdInfo: function (idx) {
      this.idInfos.splice(idx, 1);
    },
    addFfpNo: function () {
      this.ffpNos.push({
        id: 0,
        ffpType: 0,
        ffpNo: "",
        carrier: "",
      });
    },
    deleteFfpNo: function (idx) {
      this.ffpNos.splice(idx, 1);
    },
    resetPsg: function () {
      this.id = 0;
      this.customerId = 0;
      this.departmentId = 0;
      this.positionId = 0;
      this.nameCn = "";
      this.nameEn = "";
      this.firstName = "";
      this.lastName = "";
      this.mobile = "";
      this.phone = "";
      this.email = "";
      this.birthday = "";
      this.idNo = "";
      this.passportNo = "";
      this.passportExpiry = "";
      this.enationality = "";
      this.gender = "";
      this.flightLevel = "";
      this.trainLevel = "";
      this.hobby = "";
      this.ffpNo = "";
      this.remark = "";
      this.vipLevel = 0;

      this.idInfos.splice(0);
      this.ffpNos.splice(0);
    },
    savePsg: function () {
      const params = {
        id: this.id,
        customer: {
          id: this.customerId,
        },
        department: {
          id: this.departmentId,
        },
        position: {
          id: this.positionId,
        },
        nameCn: this.nameCn,
        nameEn: this.nameEn,
        firstName: this.firstName,
        lastName: this.lastName,
        mobile: this.mobile,
        phone: this.phone,
        email: this.email,
        birthday: this.birthday,
        idNo: this.idNo,
        passportNo: this.passportNo,
        passportExpiry: this.passportExpiry,
        nationality: this.nationality,
        gender: this.gender,
        flightLevel: this.flightLevel,
        trainLevel: this.trainLevel,
        hobby: this.hobby,
        ffpNo: this.ffpNo,
        remark: this.remark,
        vipLevel: this.vipLevel,
        idInfos: this.idInfos,
        ffpNos: this.ffpNos,
      };

      const jsonParam = JSON.stringify(params);

      console.log(jsonParam);

      createPsg(jsonParam, (jsonResult) => {
        if (jsonResult.status !== "OK") {
          this.showErrMsg(jsonResult.errmsg);
        } else {
          this.showErrMsg("保存成功");
          this.back();
        }
      });
    },
    editPsg: function () {
      this.resetPsg();

      const info = this.psgInfo;

      this.id = info.id;
      // this.customerId = 0
      if (info.customer !== null) {
        console.log(info.customer.id);
        this.customerId = info.customer.id;
      }
      // this.departmentId = 0
      if (info.department !== null) {
        this.departmentId = info.department.id;
      }
      // this.positionId = 0
      if (info.position !== null) {
        this.positionId = info.position.id;
      }

      this.nameCn = info.nameCn;
      this.nameEn = info.nameEn;
      this.mobile = info.mobile;
      this.phone = info.phone;
      this.email = info.email;
      this.birthday = info.birthday;
      this.idNo = info.idNo;
      this.passportNo = info.passportNo;
      this.passportExpiry = info.passportExpiry;
      this.enationalitymail = info.nationality;
      this.gender = info.gender;
      this.flightLevel = info.flightLevel;
      this.trainLevel = info.trainLevel;
      this.hobby = info.hobby;
      this.nationality = info.nationality;
      this.ffpNo = info.ffpNo;
      this.vipLevel = info.vipLevel;

      this.remark = info.remark;

      this.idInfos = info.idInfos;
      this.ffpNos = info.ffpNos;

      // this.searchCustomers()
    },
    searchCustomers: function () {
      if (this.customers.length === 0) {
        searchCustomers(null, (jsonResult) => {
          this.customers = jsonResult.dataList;
        });
      }
    },
    searchDepartmentsByCustomerId: function () {
      searchDepartmentsByCustomerId(this.customerId, (jsonResult) => {
        this.departments = jsonResult.dataList;
      });
    },
    searchPositionsByCustomerId: function () {
      searchCustomerPositions(this.customerId, (v) => {
        this.positions = v.dataList;
      });
    },
    getGenderDesc: function (val) {
      if (val === 1) {
        return "男";
      } else if (val === 2) {
        return "女";
      } else {
        return "";
      }
    },
  },
};
</script>
